/* eslint-disable import/no-dynamic-require */
import { Widget } from '@web/com/models/appConfig';
import currentWidgetState from '@web/com/recoil/atoms/widgetAtoms';
import React, { Suspense, useCallback } from 'react';
import { useRecoilState } from 'recoil';
// import Loadable from 'react-loadable';
import WidgetContainer from './WidgetContainer';
// import Loading from '../Loading';

const Loading = require('../Loading');

type WidgetProps = {
  left?:string | undefined;
  right?:string | undefined;
  top?:string | undefined;
  bottom?:string | undefined;
  title?:string | undefined;
};
type WidgetComponent = {
  // widgetComp:React.LazyExoticComponent<React.ComponentType<any>>,
  widgetComp:any,
  widgetState:Widget
};

const WidgetLoader = ():JSX.Element => {
  const [widgetStates, setwidgetStates] = useRecoilState<Widget[]>(currentWidgetState);

  // eslint-disable-next-line max-len
  // const getWidgetItem = useCallback((uri:string):React.LazyExoticComponent<React.ComponentType<unknown>> => {
  //   const paths = uri.split('/').filter((seg) => seg !== '');
  //   let widgetElement: React.LazyExoticComponent<React.ComponentType<unknown>>;
  //   if (paths.length === 1) {
  //     widgetElement = React.lazy(() => import(`@web/widgets/${paths[0]}`));
  //   } else if (paths.length === 2) {
  //     widgetElement = React.lazy(() => import(`@web/widgets/${paths[0]}/${paths[1]}`));
  //   } else if (paths.length === 3) {
  //     widgetElement = React.lazy(() => import(`@web/widgets/${paths[0]}/${paths[1]}/${paths[2]}`));
  //   } else if (paths.length === 4) {
  //     widgetElement = React.lazy(() => import(`@web/widgets/${paths[0]}/${paths[1]}/${paths[2]}/${paths[3]}`));
  //   } else if (paths.length === 5) {
  //     widgetElement = React.lazy(() => import(`@web/widgets/${paths[0]}/${paths[1]}/${paths[2]}/${paths[3]}/${paths[4]}`));
  //   } else {
  //     throw new Error('暂不支持超过6层的模块地址！');
  //   }
  //   return widgetElement;
  // }, []);

  const widgetComponents:WidgetComponent[] = [];
  // widgetStates.forEach((widgetState) => {
  //   if (widgetState.uri) {
  //     const temp = 'widgets';
  //     // import 语句的模板字符串中暂不支持 / \ 等特殊字符
  //     // const widgetElement = React.lazy(() => import(`@web/${temp}/${widgetState.name}`));
  //     // eslint-disable-next-line import/order
  //     const widgetItem = {
  //       // eslint-disable-next-line global-require
  //       // widgetComp: require(`@web/${temp}/${widgetState.name}`),
  //       // eslint-disable-next-line global-require
  //       widgetComp: require('@web/widgets/LayerList'),
  //       widgetState,
  //     };
  //     widgetComponents.push(widgetItem);
  //   }
  // });

  // eslint-disable-next-line global-require
  const Demo = require('@web/widgets/LayerList');

  const widgetClose = useCallback((widgetState:Widget) => {
    const newWidgetStates = widgetStates.filter((widgetStateItem) => {
      if (widgetState.id !== widgetStateItem.id) {
        return true;
      }
      return false;
    });
    setwidgetStates(newWidgetStates);
  }, [setwidgetStates, widgetStates]);

  return (
    <>
      <Suspense fallback={<Loading />}>
        {/* {
            widgetComponents.map(({ widgetComp, widgetState }) => {
              const Comp = widgetComp;

              const wprops:WidgetProps = {};
              if (widgetState.position) {
                if (widgetState.position.left) {
                  wprops.left = `${widgetState.position.left}px`;
                }
                if (widgetState.position.right) {
                  wprops.right = `${widgetState.position.right}px`;
                }
                if (widgetState.position.top) {
                  wprops.top = `${widgetState.position.top}px`;
                }
                if (widgetState.position.bottom) {
                  wprops.bottom = `${widgetState.position.bottom}px`;
                }
              }
              if (widgetState.title) {
                wprops.title = widgetState.title;
              }

              return (
                <WidgetContainer
                  key={widgetState.id}
                  visible
                  // eslint-disable-next-line react/jsx-props-no-spreading
                  {...wprops}
                  closeClick={() => { widgetClose(widgetState); }}
                >
                  <Comp key={widgetState.id} />
                </WidgetContainer>
              );
            })
        } */}
        <Demo />
      </Suspense>
    </>
  );
};

export default WidgetLoader;
